import React, { useState } from "react";
import { Form, Input, Button, Card, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import "./style.css";
import { useNavigate } from "react-router-dom";
import type { LoginParams } from "../../api/login";

const Login: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: LoginParams) => {
    setLoading(true);
    try {
      // const res = await login(values, { silent: true });
      // const data =
      //   res && typeof res === "object" && "data" in res
      //     ? (res as { data: { token: string; userInfo: object } }).data
      //     : res;
      // localStorage.setItem("token", data.token);
      // localStorage.setItem("userInfo", JSON.stringify(data.userInfo));

      // 模拟登录验证
      if (values.username === "admin" && values.password === "admin") {
        // 设置token
        localStorage.setItem("token", "admin-token");

        // 设置用户信息和权限
        const userInfo = {
          id: 1,
          username: "admin",
          roles: ["SUPER_ADMIN"],
          permissions: [
            "view:user",
            "create:user",
            "edit:user",
            "delete:user",
            "view:role",
            "create:role",
            "edit:role",
            "delete:role",
            "view:settings",
            "edit:settings",
            "assign:permission",
            "view:permission",
          ],
        };
        localStorage.setItem("userInfo", JSON.stringify(userInfo));

        message.success("登录成功");
        navigate("/");
      } else if (values.username === "user" && values.password === "user") {
        // 设置token
        localStorage.setItem("token", "user-token");

        // 设置普通用户信息和权限
        const userInfo = {
          id: 2,
          username: "user",
          roles: ["USER"],
          permissions: ["view:profile", "edit:profile"],
        };
        localStorage.setItem("userInfo", JSON.stringify(userInfo));

        message.success("登录成功");
        navigate("/");
      } else {
        message.error("用户名或密码错误");
      }
    } catch (err: unknown) {
      if (typeof err === "object" && err !== null) {
        const e = err as { msg?: string; message?: string };
        message.error(e.msg || e.message || "登录失败");
      } else {
        message.error("登录失败");
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      <Card title="系统登录" className="login-card">
        <Form
          name="login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          size="large"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder="用户名"
              autoComplete="username"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="密码"
              autoComplete="current-password"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block loading={loading}>
              登录
            </Button>
          </Form.Item>

          <div className="login-tips">
            <p>超级管理员账号：admin / admin</p>
            <p>普通用户账号：user / user</p>
          </div>
        </Form>
      </Card>
    </div>
  );
};

export default Login;
